<template>
  <div>
    <swiper :list="rightsAndInterestsBanner" :auto="true" style="width:100%;margin:0 auto;" :aspect-ratio="250/800"
            dots-position="center"></swiper>
    <product-item-header :title="discount.title" :feature='discount.feature'
                         style="margin-top: 8px"></product-item-header>
    <advertisement-list :advertisements="discount.advertisements"></advertisement-list>
    <product-item-header :title="wxShop.title" :feature='wxShop.feature'
                         style="margin-top: 8px"></product-item-header>
    <advertisement-list :advertisements="wxShop.advertisements"
                        :bannerImageUrl="wxShop.bannerImageUrl"></advertisement-list>

    <product-item-header :title="wxSpokesman.title" :feature='wxSpokesman.feature'
                         style="margin-top: 8px"></product-item-header>
    <advertisement-list :bannerImageUrl="wxSpokesman.bannerImageUrl"></advertisement-list>

    <product-item-header :title="vipLoan.title" :feature='vipLoan.feature'
                         style="margin-top: 8px"></product-item-header>
    <advertisement-list :bannerImageUrl="vipLoan.bannerImageUrl"></advertisement-list>
  </div>
</template>

<script>
  import { Swiper } from 'vux'
  import ProductItemHeader from '@/page/home/components/ProductItemHeader'
  import AdvertisementList from '@/page/home/components/AdvertisementList'
  import imageHuarun from '@/assets/image/banner_huarun.png'
  import imageVip from '@/assets/image/banner_vip.png'
  import imageJd from '@/assets/image/banner_jd.png'
  import imageSuning from '@/assets/image/banner_suning.png'
  import bannerWxShop from '@/assets/image/banner_wx_shop.png'
  import bannerWxSpokesman from '@/assets/image/banner_wx_spokesman.png'
  import bannerVipLoan from '@/assets/image/banner_vip_loan.png'
  import bunnerImgUrl1 from '@/assets/image/banner_cust1.png'
  import bunnerImgUrl2 from '@/assets/image/banner_cust2.png'

  export default {
    name: 'RightsAndInterests',
    components: {
      Swiper,
      ProductItemHeader,
      AdvertisementList
    },
    data () {
      return {
        rightsAndInterestsBanner: [{
          url: 'javascript:',
          img: bunnerImgUrl1,
          title: ''
        }, {
          url: 'javascript:',
          img: bunnerImgUrl2,
          title: ''
        }],
        discount: {
          title: '为你推荐',
          feature: '微微卡专属优惠',
          bannerImageUrl: '',
          advertisements: [
            {title: '华润万家支付立减', subtitle: '全场随机9折～9.9折', image: imageHuarun, url: ''},
            {title: '腾讯视屏超级影视VIP', subtitle: '8.8折优惠', image: imageVip, url: ''}
          ]
        },
        wxShop: {
          title: '微微商城',
          feature: '单笔最高减280',
          bannerImageUrl: bannerWxShop,
          advertisements: [
            {title: '京东卡99折', subtitle: '京东官方物流配送', image: imageJd, url: ''},
            {title: '苏宁卡99折', subtitle: '买电器 先买卡更优惠', image: imageSuning, url: ''}
          ]
        },
        wxSpokesman: {
          title: '微微代言人',
          feature: '美好值得分享',
          bannerImageUrl: bannerWxSpokesman
        },
        vipLoan: {
          title: '尊享贷款',
          feature: '让信用成为财富',
          bannerImageUrl: bannerVipLoan
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
